<template>
    <div class="comment-entity">
        <CommentTextFold
            :comment="comment"
            @on-timeSlice="
                (val) => {
                    emit('on-timeSlice', val);
                }
            "
        />
        <div class="comment-imgList" v-if="JSONParse(comment.imageJson).length">
            <div
                class="comment-img"
                v-if="JSONParse(comment.imageJson).length === 1"
            >
                <img
                    :src="
                        JSONParse(comment.imageJson)[0].materialUrl ||
                        JSONParse(comment.imageJson)[0].previewUrl
                    "
                    alt=""
                    @click.stop="imagePreview(JSONParse(comment.imageJson), 0)"
                />
            </div>
            <div class="comment-imgs" v-else>
                <img
                    :src="img.materialUrl || img.previewUrl"
                    alt=""
                    v-for="(img, key) in JSONParse(comment.imageJson)"
                    :key="img.materialId"
                    @click.stop="
                        imagePreview(JSONParse(comment.imageJson), key)
                    "
                />
            </div>
        </div>
        <div
            @click.stop="goSource"
            class="comment-source"
            v-if="sourceShow && level == 1 &&comment.lessonNotesId"
        >
            来源：{{ comment.itemName }}
        </div>
    </div>
</template>

<script setup>
import CommentTextFold from './comment-text-fold.vue';
import { ImagePreview } from 'vant';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

const props = defineProps({
    comment: {
        type: Object,
        default: () => {}
    },
    sourceShow: {
        type: Boolean,
        default: false
    },
    courseId: {
        type: String,
        default: ''
    },
    level: {
        type: [Number, String],
        default: 1
    }
});

const emit = defineEmits(['on-timeSlice', 'on-source']);
const store = useStore();
const route = useRoute();
function JSONParse(val) {
    if (!val) return [];
    return Array.isArray(JSON.parse(val)) ? JSON.parse(val) : [];
}
function goSource() {
    let { bizId, id, itemId, itemName } = props.comment;
    emit('on-source', itemId);
}

function imagePreview(imgList, index) {
    let imageList = imgList.map((img) => {
        return img.materialUrl || img.previewUrl;
    });
    ImagePreview({
        images: imageList,
        startPosition: index
    });
}
</script>

<style lang="scss" scoped>
.comment-imgList {
    margin-top: 8px;
    .comment-img {
        width: 173px;
        height: 90px;
        img {
            width: 100%;
            height: 100%;
            margin-bottom: 4px;
            object-fit: cover;
        }
    }
    .comment-imgs {
        display: flex;
        flex-wrap: wrap;

        img {
            width: 80px;
            height: 80px;
            margin-right: 4px;
            margin-bottom: 4px;
            object-fit: cover;
            &:nth-child(3n) {
                margin-right: 0px;
            }
        }
    }
}
.comment-source {
    margin-top: 8px;
    background: #f5f5f5;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6e7074;
    line-height: 22px;
    padding: 7px 10px;
}
</style>
